<template>
    <div class="edit-container">
        <el-row  class="do-exam-title" style="background-color: #F5F5DC">
            <el-col :span="24">
                <span :key="item.itemOrder+1"  v-for="item in answer.answerItems">
                    <el-tag :type="questionDoRightTag(item.doRight)" class="do-exam-title-tag" @click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder+1}}</el-tag>
                </span>
            </el-col>
        </el-row>
        <el-container  class="app-item-contain">
            <el-header class="align-center">
                <h1>{{form.name}}</h1>
                <div>
                    <span class="question-title-padding">试卷得分：{{answer.score}}/{{form.score}}</span> |
                    <span class="question-title-padding">试卷耗时：{{formatSeconds(answer.doTime)}}</span>
                </div>
            </el-header>
            <el-main>
                <el-form :model="form" ref="form"  label-width="100px">
                    <el-row :key="index"  v-for="(titleItem,index) in form.titleItems">
                        <h3>{{titleItem.name}}</h3>
                        <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
                            <el-form-item
                                :key="questionItem.itemOrder"
                                v-for="questionItem in titleItem.questionItems"
                                :id="'question-'+ questionItem.itemOrder"
                                label-width="50px">
                                <el-row>
                                    <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"  :answer="answer.answerItems[questionItem.itemOrder]"/>
                                </el-row>
                            </el-form-item>
                        </el-card>
                    </el-row>
                    <el-row class="do-align-center">
                        <el-button class="btn" @click="returnToPaperList">返回</el-button>
                    </el-row>
                </el-form>

            </el-main>
        </el-container>
    </div>
</template>

<script>
import QuestionAnswerShow from './QuestionAnswerShow'
export default {
    data(){
        return {
            //存放试卷
            form: {},
            //试卷答题情况
            answer: {
                id: null,
                score: 0,
                doTime: 0,
                answerItems: [],
                doRight: false
            }
        }
    },
    components:{QuestionAnswerShow},
    created(){
        //获取试卷 答题 id
        let id = this.$route.query.finishId;
        if( id && parseInt(id) !== 0){
            this.getExamPaperAnswerById(id);
        }
        console.log(id);
    },
    methods: {
        //返回试卷列表页
        returnToPaperList(){
            this.$router.replace("/teacher/correcting/finish");
        },
        //批改
        async submitForm(){
            const resp = this.putRequest("/api/teacher/examPaperAnswer/edit",this.answer);
            if( resp && resp.code == 200){
                this.$router.replace("/admin/correcting/finish");
            }
        },
        scoreSelect (score) {
            let array = []
            for (let i = 0; i <= parseInt(score); i++) {
                array.push(i.toString())
            }
            if (score.indexOf('.') !== -1) {
                array.push(score)
            }
            return array
        },
        //格式化时间
        formatSeconds (theTime) {
            var secondTime = parseInt(theTime); // 秒
            var minuteTime = 0; // 分
            var hourTime = 0; // 小时
            if (secondTime >= 60) {
                minuteTime = parseInt(secondTime / 60);
                secondTime = parseInt(secondTime % 60);
                if (minuteTime >= 60) {
                    hourTime = parseInt(minuteTime / 60);
                    minuteTime = parseInt(minuteTime % 60);
                }
            }
            var result ="" +(parseInt(secondTime) < 10? "0" + parseInt(secondTime): parseInt(secondTime));

            // if (minuteTime > 0) {
                result ="" + (parseInt(minuteTime) < 10? "0" + parseInt(minuteTime) : parseInt(minuteTime)) + ":" + result;
            // }
            // if (hourTime > 0) {
                result ="" + (parseInt(hourTime) < 10 ? "0" + parseInt(hourTime): parseInt(hourTime)) +":" + result;
            // }
            return result;
        },
        //获取答题情况
        async getExamPaperAnswerById(id){
            const resp = await this.getRequest("/api/teacher/read/"+id);
            if(resp && resp.code == 200){
                this.form = resp.obj.paper;
                this.answer = resp.obj.answer;
            }
        },
        //判断做题状态
        questionDoRightTag(status){
            console.log(status);
            if( status == null){ //还未判分
                return 'warning';
            }else if(status){ //正确
                    return 'success';
            }else{  //错误
                return 'danger';
            }
        },
        goAnchor(selector){
            this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
        }
    }
}
</script>

<style lang="scss" scoped>
.edit-container{
    font-family: "华文楷体";
}
.do-exam-title-tag{
    margin-right: 5px;
}
.do-align-center{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.btn{
    background: #66BB6A;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
    font-family: "华文楷体";
}

</style>